$(function(){
    var id=localStorage.getItem('article_id')
    // alert(id)
    // 初始化页面
    /*-----------------------------------------*/ 
    // 初始化富文本编辑器
    initEditor()

    // 1. 初始化图片裁剪器
    var $image = $('#image')
    
    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3. 初始化裁剪区域
    $image.cropper(options)

    initCate()
    // 获取下拉菜单
    function initCate(){
        $.ajax({
            url:'/my/article/cates',
            success:function(res){
                if(res.status!==0){
                    return layui.layer.msg(res.message,{icon:5})
                }
                console.log(res);
                var htmlStr=template('tpl-cate',res)
                // console.log(htmlStr);
                $('select').html(htmlStr)
                // 更新渲染表单元素，因为动态插入到页面的
                layui.form.render()
                getartEdit()
            }
        })
    }
    // id获取数据 
    function getartEdit(){
        $.ajax({
            url:'/my/article/'+id,
            success:function(res){
                console.log(res);
                if(res.status!==0){
                    return layui.layer.msg(res.message,{icon:5})
                }
                // 渲染页面
                layui.form.val('form-edit',res.data)
                
                $image
                .cropper('destroy')      // 销毁旧的裁剪区域
                .attr('src', 'http://www.liulongbin.top:3007'+res.data.cover_img)  // 重新设置图片路径
                .cropper(options)        // 重新初始化裁剪区域
            }
        })
    }
    // 单击‘选择封面’按钮，弹出文件选择框
    $('#btnChooseImage').click(function(){
        // 触发文件选择框的click事件
        $('#coverFile').click()
    })
    // 用户选择了新文件，则更换图片裁剪区域
    $('#coverFile').change(function(){
        var fileList=this.files
        // 判断用户是否选择了文件
        if(fileList<=0){
            return layui.layer.msg('请选择文件',{icon:5})
        }
        var file = fileList[0]
        // 更换裁剪区域的图片
        var newImgURL = URL.createObjectURL(file)
        $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newImgURL)  // 重新设置图片路径
        .cropper(options)        // 重新初始化裁剪区域
    })
    // 给提交修改添加submit事件
    $('#form-edit').submit(function(e){
        e.preventDefault()
        var fd=new FormData(this)
        // fd.forEach( (value,item)=>{
        //     console.log(value,item);
        // })
        $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            // 裁剪完毕之后，调用此回调函数，参数blob就是裁剪后的二进制文件
            fd.append('cover_img',blob)
            // fd.forEach(function(value,item){
            //     console.log(value,item);
            // })
            publishArticle(fd)
        })
    })
      // 封装一个调用发布文章接口的函数
      function publishArticle(fd){
        $.ajax({
            method:'post',
            url:'/my/article/edit',
            data:fd,
            contentType:false,
            processData:false,
            success:function(res){
                if(res.status!==0){
                    return layui.layer.msg(res.message,{icon:5})
                }
                layui.layer.msg(res.message,{icon:6},function(){
                    // 跳转到文章列表
                    location.href='/article/art_list.html'
                    
                })
            }
            
        })
    }
})